<div [@routerTransition]>
  <div class="m-subheader">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>任务分配</span>
        </h3>
        <span class="m-section__sub"> 管理任务的文本头信息 </span>
      </div>
      <div class="col-xs-6 text-right"></div>
    </div>
  </div>
  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body">
        <div class="tabbable-line">
          <ul class="nav nav-tabs m-tabs-line">
            <li class="nav-item m-tabs__item">
              <button
                class="btn btn-primary blue"
                *ngFor="let v of tabs"
                (click)="tabTypeClick(v.label)"
              >
                {{ v.label }}
              </button>
            </li>
          </ul>

          <div class="tab-content" style="padding-top: 0">
            <div class="tab-pane active" id="tab-model">
              <form class="horizontal-form" autocomplete="off">
                <div class="m-form m-form--label-align-right">
                  <div class="row align-items-center m--margin-bottom-10">
                    <div class="col-xl-12">
                      <div class="form-group m-form__group align-items-center">
                        <div class="input-group">
                          <input
                            [(ngModel)]="filterText"
                            name="filterText"
                            autofocus
                            class="form-control m-input"
                            [placeholder]="l('SearchWithThreeDot')"
                            type="text"
                          />
                          <span class="input-group-btn">
                            <button
                              (click)="getModels($event)"
                              class="btn btn-primary"
                              type="submit"
                            >
                              <i
                                class="flaticon-search-1"
                                [attr.aria-label]="l('Search')"
                              ></i>
                            </button>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div
                    class="row m--margin-bottom-10"
                    [hidden]="!advancedFiltersAreShown"
                  ></div>
                  <div class="row align-items-center m--margin-bottom-10">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label for="StartEndRange" class="control-label">{{
                          l("DateRange")
                        }}</label>
                        <date-range-picker
                          id="StartEndRange"
                          [(startDate)]="startDate"
                          [(endDate)]="endDate"
                        ></date-range-picker>
                      </div>
                    </div>
                  </div>
                  <div
                    class="row margin-bottom-10"
                    *ngIf="advancedFiltersAreShown"
                  >
                    <div class="col-sm-12 text-right">
                      <button
                        class="btn btn-metal"
                        (click)="getModels($event, 1)"
                      >
                        <i class="fa fa-refresh"></i>
                        {{ l("Refresh") }}
                      </button>
                    </div>
                  </div>
                  <div class="row margin-bottom-10">
                    <div class="col-sm-12">
                      <span
                        class="clickable-item text-muted"
                        *ngIf="!advancedFiltersAreShown"
                        (click)="
                          advancedFiltersAreShown = !advancedFiltersAreShown
                        "
                      >
                        <i class="fa fa-angle-down"></i>
                        {{ l("ShowAdvancedFilters") }}</span
                      >
                      <span
                        class="clickable-item text-muted"
                        *ngIf="advancedFiltersAreShown"
                        (click)="
                          advancedFiltersAreShown = !advancedFiltersAreShown
                        "
                      >
                        <i class="fa fa-angle-up"></i>
                        {{ l("HideAdvancedFilters") }}</span
                      >
                    </div>
                  </div>
                </div>
              </form>

              <div class="row align-items-center">
                <div
                  class="primeng-datatable-container"
                  [busyIf]="primengTableHelper.isLoading"
                >
                  <div class="distribution">
                    <div class="table-responsive">
                      <p-table
                        #dataTable
                        (onLazyLoad)="getModels($event)"
                        [value]="primengTableHelper.records"
                        rows="{{
                          primengTableHelper.defaultRecordsCountPerPage
                        }}"
                        [paginator]="false"
                        [lazy]="true"
                        emptyMessage="没有数据"
                        scrollable="true"
                        ScrollWidth="100%"
                        responsive="primengTableHelper.isResponsive"
                        resizableColumns="primengTableHelper.resizableColumns"
                        dataKey="id"
                        class="table"
                      >
                        <ng-template pTemplate="header">
                          <tr>
                            <th style="width: 30px"></th>
                            <th style="width: 130px">操作</th>
                            <th style="text-align: center; width: 420px">
                              基础信息
                            </th>

                            <th style="text-align: center; width: 80px">
                              主制班组
                            </th>
                            <th style="text-align: center; width: 150px">
                              绑定人员
                            </th>
                            <th
                              style="text-align: center; width: 80px"
                              pSortableColumn="postLeader"
                            >
                              岗
                              <p-sortIcon field="postLeader"></p-sortIcon>
                            </th>
                            <th
                              style="text-align: center; width: 100px"
                              pSortableColumn="taskTypeName"
                            >
                              任务类型
                              <p-sortIcon field="taskTypeName"></p-sortIcon>
                            </th>
                            <th
                              style="text-align: center; width: 120px"
                              pSortableColumn="dueDatePlanned"
                            >
                              调度指派时间
                              <p-sortIcon field="dueDatePlanned"></p-sortIcon>
                            </th>
                            <th
                              style="text-align: center; width: 120px"
                              pSortableColumn="dueDateGPlanned"
                            >
                              组长指派时间
                              <p-sortIcon field="dueDateGPlanned"></p-sortIcon>
                            </th>
                            <th
                              style="text-align: center; width: 120px"
                              pSortableColumn="dueDateUPlanned"
                            >
                              岗长指派时间
                              <p-sortIcon field="dueDateUPlanned"></p-sortIcon>
                            </th>
                          </tr>
                        </ng-template>
                        <ng-template
                          pTemplate="body"
                          let-record
                          let-expanded="expanded"
                        >
                          <tr>
                            <td style="width: 30px">
                              <a href="#" [pRowToggler]="record">
                                <!-- <i class="fa fa-cog"></i> <span class="caret"></span> -->
                                <i
                                  [ngClass]="
                                    expanded
                                      ? 'pi pi-chevron-down'
                                      : 'pi pi-chevron-right'
                                  "
                                ></i>
                              </a>
                            </td>
                            <td style="width: 130px">
                              <div
                                class="btn-group dropdown"
                                dropdown
                                container="body"
                              >
                                <button
                                  dropdownToggle
                                  class="dropdown-toggle btn btn-sm btn-primary"
                                >
                                  <i class="fa fa-cog"></i
                                  ><span class="caret"></span>
                                  操作
                                </button>
                                <ul class="dropdown-menu" *dropdownMenu>
                                  <!-- <li
                                    *ngIf="isGranted('Pages.Maintasks.PutInto')"
                                  >
                                    <a
                                      (click)="
                                        boundGangModal.show(
                                          record.id,
                                          record.mainTeamGroup,
                                          $event
                                        )
                                      "
                                      >绑定岗</a
                                    >
                                  </li> -->
                                  <li
                                    *ngIf="isGranted('Pages.Maintasks.Receive')"
                                  >
                                    <a
                                      (click)="
                                        boundUserModal.show(
                                          record.id,
                                          record.mainTeamGroup,
                                          1,
                                          record.id,
                                          $event
                                        )
                                      "
                                      >绑定人员</a
                                    >
                                  </li>
                                </ul>
                              </div>
                            </td>
                            <td style="text-align: center; width: 420px">
                              <div class="row">
                                <div class="col-md-4">
                                  <span class="m-pipeline__title">
                                    {{ record.taskCode }}
                                  </span>
                                  <span class="m-pipeline__sub">
                                    <!-- {{ pipe.modelCode }} {{ pipe.batchString }} -->
                                    投产数量： {{ record.amountPlanned }}
                                  </span>
                                </div>
                                <div class="col-md-4">
                                  <span class="m-pipeline__title">
                                    {{ record.drawingCode }}
                                  </span>
                                  <span class="m-pipeline__sub">
                                    {{ record.taskName }}
                                  </span>
                                </div>
                                <div class="col-md-4">
                                  <span class="m-pipeline__title">
                                    合格证：{{ record.hgzNo }}
                                  </span>
                                  <span class="m-pipeline__sub">
                                    质控卡：{{ record.zhikongkaNo }}
                                  </span>
                                </div>
                              </div>
                            </td>

                            <td style="text-align: center; width: 80px">
                              <span> {{ record.mainTeamGroup }}</span>
                            </td>
                            <td style="text-align: center; width: 150px">
                              <span>
                                <span> {{ record.teamUsers }}</span>
                              </span>
                            </td>
                            <td style="text-align: center; width: 80px">
                              <span class="ui-column-title"> 绑定岗</span>
                              <div
                                *ngIf="
                                  record.postLeader == '' ||
                                  record.postLeader == null
                                "
                                style="
                                  position: relative;
                                  text-align: center;
                                  width: 60px;
                                  border-radius: 2em;
                                  background-color: #f4516c;
                                  color: white;
                                  margin: auto;
                                "
                              >
                                <span class="badge">未绑定</span>
                              </div>
                              <div
                                *ngIf="
                                  record.postLeader != '' &&
                                  record.postLeader != null
                                "
                                style="
                                  position: relative;
                                  text-align: center;
                                  width: 60px;
                                  border-radius: 2em;
                                  background-color: #34bfa3;
                                  color: white;
                                  margin: auto;
                                "
                              >
                                {{ record.postLeader }}
                              </div>
                            </td>
                            <td style="text-align: center; width: 100px">
                              <span class="ui-column-title"> 任务类型</span>
                              {{ record.taskTypeName }}
                            </td>
                            <td style="text-align: center; width: 120px">
                              <span>
                                {{
                                  record.dueDatePlanned
                                    | momentFormat: "YYYY-MM-DD"
                                }}
                              </span>
                            </td>
                            <td style="text-align: center; width: 120px">
                              <span>
                                {{
                                  record.dueDateGPlanned
                                    | momentFormat: "YYYY-MM-DD"
                                }}
                              </span>
                            </td>
                            <td style="text-align: center; width: 120px">
                              <span>
                                {{
                                  record.dueDateUPlanned
                                    | momentFormat: "YYYY-MM-DD"
                                }}
                              </span>
                            </td>
                          </tr>
                        </ng-template>
                        <ng-template pTemplate="rowexpansion" let-record>
                          <div
                            class="ui-grid ui-grid-responsive ui-fluid"
                            style="margin: -0.75em; padding: 20px"
                          >
                            <!-- <div class="ui-grid-row"> -->
                            <tr>
                              <td [attr.colspan]="11">
                                <p-table
                                  class="detailTable"
                                  [value]="record.actList"
                                  [paginator]="false"
                                  [lazy]="true"
                                  [scrollable]="true"
                                >
                                  <ng-template pTemplate="header">
                                    <tr>
                                      <th
                                        style="text-align: center; width: 130px"
                                        *ngIf="isGranted('Pages.Distribution.User')"
                                      >
                                        操作
                                      </th>
                                      <th
                                        style="text-align: center; width: 200px"
                                      >
                                        工序名称
                                      </th>
                                      <th
                                        style="text-align: center; width: 200px"
                                      >
                                        工序执行人
                                      </th>
                                      <th
                                        style="text-align: center; width: 200px"
                                      >
                                        计划完成时间
                                      </th>
                                      <th
                                        style="text-align: center; width: 200px"
                                      >
                                        是否完成
                                      </th>
                                      <th
                                        style="text-align: center; width: 200px"
                                      >
                                        完成时间
                                      </th>
                                      <th
                                        style="text-align: center; width: 200px"
                                      >
                                        备注
                                      </th>
                                    </tr>
                                  </ng-template>
                                  <ng-template pTemplate="body" let-rowData>
                                    <tr [pSelectableRow]="rowData">
                                      <td style="width: 130px" >
                                        <div
                                          class="btn-group dropdown"
                                          dropdown
                                          container="body"
                                          *ngIf="rowData.isFinish == false"
                                        >
                                          <button
                                            dropdownToggle
                                            class="dropdown-toggle btn btn-sm btn-primary"
                                          >
                                            <i class="fa fa-cog"></i
                                            ><span class="caret"></span>
                                            操作
                                          </button>
                                          <ul
                                            class="dropdown-menu"
                                            *dropdownMenu
                                          >
                                            <li
                                            *ngIf="isGranted('Pages.Distribution.User')"
                                            >
                                              <a
                                                (click)="
                                                  boundUserModal.show(
                                                    rowData.nodeId,
                                                    record.postLeader,
                                                    2,
                                                    record.id,
                                                    $event
                                                  )
                                                "
                                                >绑定节点人员</a
                                              >
                                            </li>
                                          </ul>
                                        </div>
                                      </td>
                                      <td style="width: 200px">
                                        {{ rowData.actName }}
                                      </td>
                                      <td style="width: 200px">
                                        {{ rowData.userName }}
                                      </td>
                                      <td style="width: 200px">
                                        {{
                                          rowData.planDueTime
                                            | momentFormat: "YYYY-MM-DD"
                                        }}
                                      </td>
                                      <td style="width: 200px">
                                        <div
                                          *ngIf="rowData.isFinish == false"
                                          style="
                                            position: relative;
                                            text-align: center;
                                            width: 60px;
                                            border-radius: 2em;
                                            background-color: #f4516c;
                                            color: white;
                                            margin: auto;
                                          "
                                        >
                                          <span class="badge">未完成</span>
                                        </div>
                                        <div
                                          *ngIf="rowData.isFinish == true"
                                          style="
                                            position: relative;
                                            text-align: center;
                                            width: 80px;
                                            border-radius: 2em;
                                            background-color: #34bfa3;
                                            color: white;
                                            margin: auto;
                                          "
                                        >
                                          已完成
                                        </div>
                                      </td>
                                      <td style="width: 200px">
                                        <div
                                          *ngIf="rowData.isFinish == false"
                                          style="
                                            position: relative;
                                            text-align: center;
                                            width: 60px;
                                            border-radius: 2em;
                                            background-color: #f4516c;
                                            color: white;
                                            margin: auto;
                                          "
                                        >
                                          <span class="badge">未完成</span>
                                        </div>
                                        <div *ngIf="rowData.isFinish == true">
                                          {{
                                            rowData.dueTime
                                              | momentFormat: "YYYY-MM-DD"
                                          }}
                                        </div>
                                      </td>

                                      <td style="width: 200px">
                                        {{ rowData.remark }}
                                      </td>
                                    </tr>
                                  </ng-template>
                                </p-table>
                              </td>
                            </tr>
                            <!-- </div> -->
                          </div>
                        </ng-template>
                      </p-table>
                      <div class="primeng-paging-container">
                        <p-paginator
                          rows="{{
                            primengTableHelper.defaultRecordsCountPerPage
                          }}"
                          #paginator
                          (onPageChange)="getModels($event)"
                          [totalRecords]="primengTableHelper.totalRecordsCount"
                          [rowsPerPageOptions]="
                            primengTableHelper.predefinedRecordsCountPerPage
                          "
                        >
                        </p-paginator>
                        <span class="total-records-count">
                          {{ "总计:" + primengTableHelper.totalRecordsCount }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <boundGangModal
    #boundGangModal
    (modalSave)="getModels($event)"
  ></boundGangModal>
  <boundUserModal
    #boundUserModal
    (modalSave)="getModels($event)"
  ></boundUserModal>
</div>
